<template>
  <div class="shouYe-container">
    <el-card class="login-box">
      <!--导航-->

      <div class="line">

      </div>

      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router="true"
        style="margin-bottom: 300px"

      >

        <div style="opacity: 0.6;background: #000000;width: 200px;height:60px;float: left">
          <img src="../../assets/cn.png" height="60px" style="margin-left: 30px">
        </div>
        <el-submenu index="1">

          <template slot="title" style="float:right">消费者服务</template>
          <el-menu-item index="1-1" style="float:right">菜鸟裹裹</el-menu-item>
          <el-menu-item index="1-2">社区驿站</el-menu-item>
          <el-menu-item index="1-3">校园驿站</el-menu-item>
          <el-menu-item index="1-4">菜鸟乡村</el-menu-item>

        </el-submenu>

        <el-submenu index="2">
          <template slot="title">国内商家服务</template>
          <el-menu-item index="2-1">国内供应链</el-menu-item>
          <el-menu-item index="2-2">C2M</el-menu-item>
          <el-menu-item index="2-3">菜鸟直送</el-menu-item>
          <el-menu-item index="2-4">金融服务</el-menu-item>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title">全球商家服务</template>
          <el-menu-item index="3-1">全球供应链</el-menu-item>
          <el-menu-item index="3-2">全球包裹服务</el-menu-item>
          <el-menu-item index="3-3">全球货运服务</el-menu-item>
          <el-menu-item index="3-3">金融服务</el-menu-item>

        </el-submenu>

        <el-submenu index="4">
          <template slot="title">快递行业服务</template>
          <el-menu-item index="4-1">商家服务</el-menu-item>
          <el-menu-item index="4-2">物流企业服务</el-menu-item>
          <el-menu-item index="4-3">金融服务</el-menu-item>
        </el-submenu>
        <el-menu-item index="5">菜鸟地网</el-menu-item>
        <el-menu-item index="6">物流科技</el-menu-item>
        <el-submenu index="7">

          <template slot="title" style="float:right">数据报表</template>
          <el-menu-item index="/shouYe/merchant">商户入驻率</el-menu-item>
          <el-menu-item index="/shouYe/station">驿站数量统计</el-menu-item>
          <el-menu-item index="/shouYe/Expqua">快递数量统计</el-menu-item>
          <el-menu-item index="/shouYe/consumers">消费者数量</el-menu-item>

        </el-submenu>

        <el-menu-item index="8">绿色责任</el-menu-item>
        <el-menu-item index="9">关于我们</el-menu-item>
        <!--<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>-->
      </el-menu>

      <!--导航-->
      <el-select v-model="value" placeholder="请选择" style=" margin-top: 60px;width: 25%">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

    </el-card>
    <router-view></router-view>

    <br><br><br><br>
    <div class="flex_sj-iv">
      <div class="item">
        <div class="el-card" style="width: 240px"><img src="../../assets/低门槛创业.png" width="120px"
                                                       style="margin: 40px;border-radius: 2px">
          <h3 style="text-align: center">低门槛创业</h3>
          <p style="color:#909399;font-size: 0.9em;text-align: center"> 免加盟费<br>阿里巴巴旗下品牌<br><br></p></div>
      </div>
      <div class="item">
        <div class="el-card" style="width: 240px"><img src="../../assets/快递合作.png" width="120px"
                                                       style=" margin: 40px; border-radius: 2px">
          <h3 style="text-align: center">收益多元</h3>
          <p style="color:#909399;font-size: 0.9em;text-align: center">&nbsp;&nbsp;&nbsp;&nbsp;包裹业务带来稳定物流收益，
            新客流带来店铺额外收益，更有驿站团购、派样、洗衣、广告等增值服务<br><br></p></div>
      </div>
      <div class="item">
        <div class="el-card" style="width: 240px"><img src="../../assets/收益多元.png" width="120px"
                                                       style=" margin: 40px; border-radius: 2px">
          <h3 style="text-align: center">快递合作</h3>
          <p style="color:#909399;font-size: 0.9em;text-align: center">&nbsp;&nbsp;&nbsp;&nbsp;通达系快递公司官方指定共建，主流快递公司签收数据打通,投递效率高、合作意愿强<br>
          </p></div>
      </div>
      <div class="item">
        <div class="el-card" style="width: 240px"><img src="../../assets/智能驿站.png" width="120px"
                                                       style=" margin: 40px; border-radius: 2px">
          <h3 style="text-align: center">智能驿站</h3>
          <p style="color:#909399;font-size: 0.9em;text-align: center">
            &nbsp;&nbsp;&nbsp;&nbsp;黑科技设备、降低人力、提高效率<br><br><br></p></div>
      </div>
    </div>

   <<el-row class="mainbox" style="width: 100%;height: 500px;">
      <el-carousel interval="4000" type="card" height="400px">
        <el-carousel-item v-for="(item,index) in carouselList" :key="index">
          <img :src="item.src" style="width: 100%;height: 500px;">
        </el-carousel-item>
      </el-carousel>
  </el-row>
    <div class="main1">

    </div>
    <div class="footerbox">
      <!--style="background: black;width: 100%;height: 200px;margin-bottom: 500px"-->>

      <el-menu
        background-color="#000000"
        text-color="white"
        style="width: 100%;height: 180px"
      >

        <el-menu-item style="margin-left: 500px;margin-top: auto">
          <el-button type="text" icon="el-icon-medal-1">菜鸟品牌</el-button>
          <el-button type="text" icon="el-icon-phone-outline">联系我们</el-button>
          <el-button type="text" icon="el-icon-s-shop">合作申请</el-button>
          <el-button type="text" icon="el-icon-message-solid">廉政举报</el-button>
          <el-button type="text" icon="el-icon-document">法律政策</el-button>
          <el-button type="text" icon="el-icon-success">菜鸟合规</el-button>
          <small><p style="font-feature-settings:'微软雅黑 ';line-height: 2.0em;">
            淘宝网|天猫|聚划算|全球速卖变通|阿里巴巴国际交易市场|1688|阿里妈妈|阿里云计算|AliOS|飞猪|UC|
            高德地图|阿里通信<br>钉钉|友盟|虾米|阿里星球|一淘|蚂蚁金服|支付宝|网商银行|口碑|阿里健康|阿里游戏<br>
            2015-2020菜鸟 版权所有 增值电信业务许可证： 浙B2-20160216 <img src="../../assets/gan.png" width="14px"> 浙公网安备3301002000117号
          </p></small>
        </el-menu-item>
        <img src="../../assets/top1.png" width="120px" style="margin-left:80px;margin-top: -50px">
        <br>
        <br>
        <img src="../../assets/xinlang.png" width="30px" style="margin-left:80px">
        <img src="../../assets/wx.png" width="30px" style="margin-left:30px">
      </el-menu>
    </div>


  </div>

</template>

<script>

  export default {
    name: "shouYe", data() {
      return {
        carouselList: [
          {key: 'sadas', src: require('../../assets/1.jpg'), desc: 'xxxx'},
          {key: 'dksaj', src: require('../../assets/2.jpg'), desc: 'xxxx'},
          {key: 'dksaj', src: require('../../assets/3.jpg'), desc: 'xxxx'},
          {key: 'dksaj', src: require('../../assets/4.jpg'), desc: 'xxxx'},
          {key: 'dksaj', src: require('../../assets/5.jpg'), desc: 'xxxx'}
        ],

        tableData: [],

        options: [{
          value: '选项1',
          label: '社区驿站'
        }, {
          value: '选项2',
          label: '校园驿站'
        }, {
          value: '选项3',
          label: '菜鸟乡村'
        }],
        value: '',
        activeIndex2: '1'
      }
    }, methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style scoped>

  /*.shouYe-container {
    background-image: url("../../assets/shouye3.jpg");
    background-repeat: no-repeat;
    background-size:120%;
    position: fixed;
    height:100%;
    width: 100%;
  }*/
  .login-box {

    height: 100px;
    background-color: rgba(0, 0, 0, 7);
    opacity: 100;

    font-size: 1.2em;
    font-weight: bolder;
  }

  /*.flex_sj-iv{
    width: 25%;
    float: left;
    height: 80px;
    border: 1px solid #42b983;
  }*/
  .item {
    width: 20%;
    float: left;
    border: 1px solid white;
    margin: 25px;

  }

  .footerbox {
    min-width: 1024px;
    max-width: 1920px;
    margin-top: 50px;
    background: black;
    height: 160px;


  }

  .mainbox {
    width: 1450px;
    height: 200px;
    border: 1px solid white;
    padding: 25px;
    clear: both;
    padding-right: 20px;
  }
  .main1{
    background-image: url("../../assets/xh.jpg");
    background-repeat: no-repeat;
    background-size:120%;
    position: fixed;
    width: 100%;
    min-width: 1024px;
    max-width: 1920px;
    height: 400px;
   /* display: flex;
    justify-content: center;
    align-items: center;*/

  }
 /*.main1 img {*/
 /*   width: 35%;*/
 /* }*/

  /*轮播图*/

  .el-carousel{
    height: 100%;
  }

</style>
